<template>
  <el-dialog
    title="新建剪辑"
    :visible.sync="show"
    width="730px"
    :modal-append-to-body="false"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入剪辑任务名称" autofocus class="white" />
      </el-form-item>
      <el-form-item label="成片保存" prop="name">
        <div class="suffix-form-item">
          <el-select v-model="ruleForm.status" class="f1" placeholder="请选择剪辑状态">
            <el-option
              v-for="item in locationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button class="suffix" type="primary">剪辑状态</el-button>
        </div>
      </el-form-item>
      <el-form-item label="选择比例" prop="name">
        <div class="flex align-center ratio-list">
          <div class="ratio-1 flex-c align-center item pointer" :class="{active:active==0}" @click="active=0">
            <div class="wrapper flex-v flex-c align-center">
              <div style="line-height: 20px;">竖版</div>
              <div style="line-height:20px;">9:16</div>
            </div>
          </div>
          <div class="ratio-2 flex-c align-center item pointer" :class="{active:active==1}" @click="active=1">
            <div class="wrapper flex-c align-center">
              <div>横版</div>
              <div>16:9</div>
            </div>
          </div>
          <div class="ratio-3 flex-c align-center item pointer" :class="{active:active==2}" @click="active=2">
            <div class="wrapper flex-c align-center">
              <div>方形</div>
              <div>1:1</div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="flex-e align-center">
      <el-button @click="show=false">取消</el-button>
      <el-button type="primary" @click="show=false">开始剪辑</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'AddModal',
  data() {
    return {
      active: 0,
      show: false,
      locationList: [],
      ruleForm: {
        name: '',
        location: '',
        ratio: ''
      },
      rules: {
        name: [{ required: true, message: '请输入剪辑任务名称', trigger: 'blur' }],
        location: [
          {
            required: true,
            message: '请选择成片视频保存目录',
            trigger: ['blur', 'change']
          }
        ],
        ratio: [
          {
            required: true,
            message: '请选择类型',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    open() {
      this.show = true
    },
    close() {
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.ratio-list {
  .item {
    width: 160px;
    height: 90px;
    border-radius: 15px;
    background: rgba(204, 204, 204, 0.2);
    border: 0.5px solid rgba(166, 166, 166, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 119, 255, 1);
    margin-right:20px;

    .wrapper {
      background: rgba(0, 119, 255, 0.3);
    }
  }
  .item.active {
    background: rgba(0, 119, 255, 0.1);
    border: 0.5px solid rgba(0, 119, 255, 1);
  }
  .ratio-1 {
    .wrapper {
      width: 40px;
      height: 71px;
    }
  }
  .ratio-2 {
    .wrapper {
      height: 40px;
      width: 71px;
    }
  }
  .ratio-3 {
    .wrapper {
      width: 70px;
      height: 70px;
    }
  }
}
</style>
